<template>
    <div class="app">
  <div class="shell">
        <div class="container b-container" id="b-container">
                <h2 class="form_title title1">注册账号</h2>
                <input type="text" class="form_input" v-model="username" placeholder="请输入用户名">
                <input type="text" class="form_input" v-model="password" placeholder="请输入密码">
                <input type="text" class="form_input" v-model="repeat" placeholder="请再次输入密码">

  <!--验证码-->
  <div class="login-page">
    <el-form label-width="160px" class="custom-form">
      <el-form-item label="验证码">
        <el-input placeholder="请输入验证码" v-model="sidentifyMode" clearable></el-input>
      </el-form-item> 
      
      <div class="code" @click="refreshCode">
        <Sidentify :identifyCode="identifyCode"></Sidentify>
      </div>
    </el-form>     
    
    
                <button class="button1 button"  @click="register()">注册</button>

</div>
        </div>
        
        <div>
            <div class="switch switch_container " id="switch-c2">
            <div class="logo"><img src="../assets/LOGO.PNG" alt="1"></div>
                <h2 class="switch_title title2" style="letter-spacing: 0;">Hello Friend！</h2>
                <p class="switch_description description">已有账号？去登陆 ！</p>
                <router-link to="/login">
                  <button class="switch_button button">去登陆</button>
                </router-link>
            </div>
            
        </div>
  </div>
        
</div>

</template>


<style lang="scss" scoped>

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* 防止滚动条 */
}


.app {
    background-color: #c1dc9c;
    margin: 0;
    padding: 0;
    height: 98vh; /* 使容器高度占满整个视口 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    overflow: hidden;
  }
  .shell {
            position: relative;
            width: 800px;
            min-width: 800px;
            min-height: 500px;
            height: 500px;
            padding: 20px;
            background-color:#f2f5de;
            box-shadow: 10px 10px 20px #98a35c;
            border-radius: 12px;
            overflow: hidden;
        }


        .form {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }


    .form_input{
    position: relative;
    left: 60px;
    width: 350px;
    height: 38px;
    margin: 10px 0;
    padding-left:25px;
    font-size: 13px;
    border-radius: 10px;
    letter-spacing: 0.15px;
    border: none;
    outline: none;
    background-color:rgb(251, 254, 251);
    transform: 0.25s ease;
    box-shadow: inset 2px 2px 4px rgb(194, 200, 195);
    margin: 5%;
    margin-top: 0px;
}

.form_input：focus{
    box-shadow: inset 4px 4px 4px #707553;
}

.button1{
  cursor: pointer;
    top: 25px;
    left: 185px;
    position: relative;
    margin: 0 auto;
    box-shadow: 2px 2px 8px #7f8941; 
}

.button1:hover,
.submit:hover{
    box-shadow: 6px 6px 10px #a7ae84;
    transform: scale(0.985);
    transition: 0.25s;
}

.button1:active,
.button1:focus{
    box-shadow: 2px 2px 6px #7f8941;
    transform: scale(0.97);
    transition: 0.25s;
}

.button{
    font-size: 15px;
    color: #303414;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 6px;
    background-color: #d0dd75;
    width: 160px;
    height: 50px;
    border-radius: 30px;
    border: none;
    outline: none;
    cursor: pointer;
}


        .form_span {
            margin-top: 30px;
            margin-bottom: 12px;
        }

        .form_link {
            position: relative;
            left:106px;
            top: -20px;
            color: #5b6129;
            font-size: 13px;
            margin-top: 25px;
            border-bottom: 1px solid #a0a5a8;
            line-height: 2;
            cursor: pointer;
        }

        .title1 {
          position: relative;
          font-size: 46px;
          font-weight: 700;
          line-height: 3;
          color: #6e7634;
          letter-spacing: 3px;
          left:181px; /* 将文本水平居中 */
          margin-top: 0px; 
          margin: 0%;
        }

        .description {
            font-size: 14px;
            letter-spacing: 0.25px;
            text-align: center;
            line-height: 1.6;
        }

        
        .b-container {
          z-index: 1;
          position: absolute;
          left: -60px;
          top: 0px;
          width: 60%; /* 根据需要调整宽度 */
          height: 550px;
          padding: 25px;
          background-color:#f2f5de;
          transition: 1.25s;
        }

        .switch{
            display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0; /* 将 switch 移到右侧 */
  border-radius: 12px;
  height: 500px;
  padding: 50px;
  z-index: 200;
  transition: 1.25s;
  overflow: hidden;
  box-shadow: -8px 8px 20px #d9dcc0;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.703);
}

.switch_container {
          z-index: 2;
          border-radius: 16px;
          display: flex;
          justify-content: flex-start; /* 将内容对齐到顶部 */
          align-items: flex-start; /* 将内容对齐到顶部 */
          flex-direction: column;
          position: absolute;
          width: 250px;
          padding: 20px 55px; /* 减少顶部的内边距 */
          transition: 1.25s;
        }

       .logo{
        width: 240px; /* 设置合适的宽度 */
        height: 240px; /* 设置合适的高度 */
        margin-top: -50px; /* 距离顶端0px */
        text-align: center; 
        align-items: center;
        margin: 0 auto; /* 居中 */
}

       .logo img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
}

.switch_title{
  position: relative;
    color: #3b474a;
    margin: 0;
    top: -20px; /* 向上移动 */
    left: -20px; /* 向左移动 */
    font-size: 47px;
}

.switch_description{
    position: relative;
    top:-30px;
    left: -17px;
    font-size: 15px;
    color: #234458;
}


.switch_button {
    cursor: pointer;
    top: -20px;
    left: 43px;
    position: relative;
    margin: 0 auto;
    box-shadow: 2px 2px 8px #7f8941; /* 添加默认阴影 */
}

.switch_button:hover,
.submit:hover{
    box-shadow: 6px 6px 10px #a7ae84;
    transform: scale(0.985);
    transition: 0.25s;
}

.switch_button:active,
.switch_button:focus{
    box-shadow: 2px 2px 6px #7f8941;
    transform: scale(0.97);
    transition: 0.25s;
}

.custom-form {
  display: flex;
  align-items: center;
}

.custom-form .el-form-item {
  margin-right: 20px; /* 调整标签与输入框之间的距离 */
}

.custom-form .el-input {
  width: 150px; /* 设置输入框的宽度 */
}




</style>

<script setup>
import Sidentify from './Sidentify.vue';
import axios from 'axios';
import { useRouter } from 'vue-router'
import { ref, onMounted, onBeforeUnmount } from 'vue';
import component from 'element-plus/es/components/tree-select/src/tree-select-option.mjs';
import { ElMessage } from 'element-plus';

//获取路由器
let $router = useRouter()
let sidentifyMode = ref('') //输入框验证码
let identifyCode = ref('') //图形验证码
let identifyCodes = ref('1234567890abcdefjhijklinopqrsduvwxyz') //验证码出现的数字和字母
 
//组件挂载
onMounted(() => {
  identifyCode.value = ''
  makeCode(identifyCodes.value, 4)
})
 
// 生成随机数
const randomNum = (min, max) => {
  max = max + 1
  return Math.floor(Math.random() * (max - min) + min)
}
// 随机生成验证码字符串
const makeCode = (o, l) => {
  for (let i = 0; i < l; i++) {
    identifyCode.value += o[randomNum(0, o.length)]
  }
}
// 更新验证码
const refreshCode = () => {
  identifyCode.value = ''
  makeCode(identifyCodes.value, 4)
}


//注册
const username = ref(''); // 使用ref创建响应式变量
const password = ref('');
const flag = ref('');

const register = () => {
    // 验证用户名是否为空
    if (!username.value) {
        ElMessage({ type: 'error', message: '用户名不能为空！' });
        return;
    }

    // 验证两次密码是否一致
    if (password.value !== repeat.value) {
        ElMessage({ type: 'error', message: '两次输入的密码不一致！' });
        return;
    }

    // 验证密码是否符合规则
    if (password.value.length < 6) {
        ElMessage({ type: 'error', message: '密码长度不能少于6个字符！' });
        return;
    }

    // 验证验证码是否为空
    if (!sidentifyMode.value) {
        ElMessage({ type: 'error', message: '验证码不能为空！' });
        return;
    }

    // 验证验证码是否正确
    if (sidentifyMode.value != identifyCode.value) {
        ElMessage({ type: 'error', message: '验证码错误！' });
        refreshCode();
        return;
    }

    // 发送注册请求
    axios({
        url: "https://localhost/8080/user/regist",
        method: 'post',
        data: {
            username: username.value,
            password: password.value.toLowerCase(), // 强制小写
        }
    }).then(res => {
        flag.value = res.data.flag;
        if (flag.value !== '1') {
            ElMessage({ type: 'error', message: '注册失败，用户名已存在！' });
            return;
        }

        ElMessage({ type: 'success', message: '注册成功！' });
        $router.push('/login');
    }).catch(err => {
        ElMessage({ type: 'error', message: '注册失败，请稍后再试！' });
        console.error(err);
    });
};
</script>